<template>
	<view class="wrap">
		<view class="tHeader">
			<g-header :rstyle="{width: '120rpx'}">
				<view class="datePicker app_arrow" @click="showTimePicker = true">{{dateTypeName}}</view>
			</g-header>
			<view class="nav">
				<g-nav :navlist="navList" @click="onNavTap" :navindex="navIndex"></g-nav>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="(val, idx) in list" :key="idx">
				<view class="item-date">{{idx}}</view>
				<view class="item-goodsWrap" v-for="(item, index) in val" :key="index">
					<view class="item-goods">
						<view class="item-goods-img">
							<image :src="item.cover"></image>
						</view>
						<view class="item-goods-main">
							<view class="item-goods-title">{{item.productName}}</view>
							<view class="item-goods-mainB">
								<view class="item-goods-mainB_L">
									<view class="">
										<text>色号：{{item.colorName || '未知'}}</text>
										<text style="margin-left: 14rpx;"
											v-if="item.unit === '条'">{{item.unitsNum + item.unit}}</text>
										<text style="margin-left: 14rpx;" v-else>{{item.unitNum + item.unit}}/条</text>
									</view>
									<view class="">
										<text>￥{{item.salePrice}}</text>
										<text>（{{item.emptyDiff}}）</text>
									</view>
								</view>
								<view class="item-mainB_R">
									<view>库存：{{`${item.currAmount}条`}}</view>
									<view>{{`${item.totalCurrAmountMeter}${item.unit}`}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="item-log">
						<g-item :customstyle="logItemCustomstyle">
							<template v-slot:left>
								<view class="item-log_L app_flex-aic">
									<view class="item-log_title">
										<block v-if="item.recordWay == 1 && item.state == 1">手工入库</block>
										<block v-if="item.recordWay == 1 && item.state == 2">手工出库</block>
										<block v-if="item.recordWay == 2 && item.state == 1">入库</block>
										<block v-if="item.recordWay == 2 && item.state == 2">扫码出库</block>
										<!-- {{item.recordWay == 1 ? '手工': ''}}{{item.state == 1 ? '入库':'出库'}} -->
									</view>
									<view class="item-log_type" :class="{out: item.state == 1}">
										{{item.state == 1 ? '入库':'出库'}}
									</view>
								</view>
							</template>
							<template v-slot:right>
								<view class="item-log_R">
									{{item.state == 1 ? '入库':'出库'}}数量：{{`${item.amount}条(${item.totalAmountMeter}${item.unit})`}}
								</view>
							</template>
						</g-item>
					</view>
				</view>
			</view>
		</view>
		<no-data v-if="JSON.stringify(list) === '{}' && hasLoad"></no-data>
		<no-more v-if="page > 1 && noMore"></no-more>
		<!-- <g-time-picker :show="showTimePicker" @change="onPickerDateChange"></g-time-picker> -->
		<g-time-picker :show="showTimePicker" @change="onTimePickerFlagChange" @dateChange="onPickerDateChange">
		</g-time-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navList: [{
					name: '全部',
					type: 0
				}, {
					name: '入库',
					type: 1
				}, {
					name: '出库',
					type: 2
				}],
				navIndex: 0,
				logItemCustomstyle: {
					lineHeight: '28rpx',
					padding: '26rpx 20rpx',
					border: '0',
					backgroundColor: '#f7f7f7'
				},
				showTimePicker: false,
				list: {},
				page: 1,
				size: 15,
				hasLoad: false,
				noMore: false,
				beginDate: '',
				endDate: '',
				dateType: 1,
				dateTypeName: '近七天'
			}
		},
		onLoad(options) {
			const date = new Date()
			const year = date.getFullYear()
			const month = date.getMonth()
			const day = date.getDate()
			this.beginDate = new Date(year, month, day - 6).Format('yyyy-MM-dd')
			this.endDate = date.Format('yyyy-MM-dd')
			this.updatePage()
		},
		onPullDownRefresh() {
			this.updatePage()
		},
		onReachBottom() {
			this.page++
			this.getList()
		},
		methods: {
			updatePage() {
				this.resetPage()
				this.getList()
			},
			resetPage() {
				this.list = {}
				this.page = 1
				this.size = 15
				this.hasLoad = false
				this.noMore = false
			},
			onSkipTap(type, index) {
				const urlObj = {
					xx: '/pages/xx/xx',
				}
				this.$g_util.navigationTo(urlObj, type)
			},
			/**
			 * 获取库存明细
			 */
			getList() {
				// let data = [{
				// 	"amount": 5,
				// 	"cover": "../../static/images/img-goods.jpg",
				// 	"createTime": "2022-01-26",
				// 	"currAmount": 0,
				// 	"price": 0,
				// 	"productName": "红玉色亮丝缎/玉脂缎超柔仿真丝-光泽强超舒适",
				// 	"recordWay": 1,
				// 	"state": 1,
				// 	"units": "米"
				// }, {
				// 	"amount": 5,
				// 	"cover": "../../static/images/img-goods.jpg",
				// 	"createTime": "2022-01-26 10:15:21",
				// 	"currAmount": 0,
				// 	"price": 0,
				// 	"productName": "红玉色亮丝缎/玉脂缎超柔仿真丝-光泽强超舒适",
				// 	"recordWay": 2,
				// 	"state": 2,
				// 	"units": "米"
				// }, {
				// 	"amount": 5,
				// 	"cover": "../../static/images/img-goods.jpg",
				// 	"createTime": "2022-02-26T05:43:09.980Z",
				// 	"currAmount": 0,
				// 	"price": 0,
				// 	"productName": "红玉色亮丝缎/玉脂缎超柔仿真丝-光泽强超舒适",
				// 	"recordWay": 1,
				// 	"state": 2,
				// 	"units": "米"
				// }]

				// return
				this.$g_api.repositoryListProductRecord({
					queryType: this.navList[this.navIndex].type,
					beginDate: this.beginDate,
					endDate: this.endDate,
					dateType: this.dateType,
					page: this.page,
					size: this.size
				}).then(({
					data
				}) => {
					uni.stopPullDownRefresh()
					this.hasLoad = true
					if (data.length > 0) {
						console.log(data);
						let obj = this.list
						data.forEach(item => {
							item.cover = this.$g_util.concatRequestUrl(item.cover)
							if (item.createTime) {
								item.createTime = item.createTime.replace(/-/g, '/')
							} else {
								item.createTime = 0
							}
							let dateStr = new Date(item.createTime).Format('yyyy-MM-dd')
							console.log(dateStr);
							if (obj[dateStr]) {
								obj[dateStr].push(item)
							} else {
								obj[dateStr] = [item]
							}
						})
						console.log(obj);
						this.list = obj
					} else {
						this.noMore = true
					}
				})
			},
			onNavTap(navIndex) {
				console.log(navIndex);
				this.navIndex = navIndex
				this.updatePage()
			},
			onTimePickerFlagChange(val) {
				this.showTimePicker = val
			},
			onPickerDateChange({
				beginDate,
				endDate,
				dateType,
				dateTypeName
			}) {
				this.beginDate = beginDate
				this.endDate = endDate
				this.dateType = dateType
				this.dateTypeName = dateTypeName
				this.updatePage()
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		padding-top: calc(var(--status-bar-height) + 98rpx + 90rpx);
	}

	.tHeader {
		position: fixed;
		top: 0;
		left: 0;
		background-color: #fff;
		z-index: 9999;
	}

	.datePicker {
		&::after {
			transform: translateY(-70%) rotate(135deg);
		}
	}

	.list {}

	.item {}

	.item-date {
		padding: 0 30rpx;
		line-height: 80rpx;
		color: #666;
		font-size: 26rpx;
		// background-color: #fff;
	}

	.item-goodsWrap {
		padding-bottom: 30rpx;
		border-bottom: 1px solid $g-border-color;
		background-color: #fff;
	}

	.item-goods {
		display: flex;
		padding: 30rpx 20rpx;
		background-color: #fff;
	}

	.item-goods-img {
		width: 140rpx;
		font-size: 0;

		image {
			width: 140rpx;
			height: 140rpx;
			border-radius: 10rpx;
			background-color: $g-main-bg;
		}
	}

	.item-goods-main {
		flex: 1;
		margin-left: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.item-goods-title {
		font-size: 28rpx;
		font-weight: bold;
	}

	.item-goods-mainB {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.item-goods-mainB_L {
		view {
			font-size: 24rpx;
			color: #999;
			&:last-child {
				text {
					&:first-child {
						color: #FF4C4C;
						font-size: 26rpx;
					}

					&:last-child {
						color: #999999;
						font-size: 20rpx;
					}
				}
			}
		}
	}

	.item-goods-mainB_R {
		font-size: 24rpx;
		color: #999;
	}

	.item-mainB_R {
		padding-right: 10rpx;
		font-size: 24rpx;
		color: #999;
		text-align: right;
	}

	.item-log {
		width: 710rpx;
		margin: 0 auto;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.item-log_L {}

	.item-log_title {
		font-size: 24rpx;
		color: #333;
	}

	.item-log_type {
		margin-left: 20rpx;
		padding: 8rpx 12rpx;
		line-height: 20rpx;
		font-size: 20rpx;
		border-radius: 6rpx;
		color: #FF7733;
		background-color: #FFF0E8;

		&.out {
			color: #3377FF !important;
			background-color: #E5EEFF !important;
		}
	}

	.item-log_R {
		font-size: 24rpx;
		color: #333;
	}
</style>
